<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/base.css" />
    <title>Document</title>
    <style>
      * {
        margin: 0%;
        padding: 0;
      }
      .box {
        position: fixed;
        width: 630px;
        right: 200px;
        top: 200px;
        background: rgba(229, 230, 223, 0.6);
        padding: 30px 30px 30px 50px;
        border-radius: 10px;
      }
      .box input {
        height: 40px;
        width: 340px;
        margin: 10px 5px;
        padding-left: 6px;
        border-radius: 5px;
        border: none;
      }
      .box button {
        width: 300px;
        height: 40px;
        text-align: center;
        background-color: rgb(48, 138, 241);
        border: none;
        margin-bottom: 10px;
        border-radius: 25px;
        margin-left: 100px;
        font-size: 20px;
      }
      .box button:hover {
        color: #fff;
        cursor: pointer;
      }
      .box span:not(.vcSpan):not(.vcSpan1) {
        display: inline-block;
        width: 70px;
      }
      /**/
      body {
        overflow: hidden;
      }
      .sologn {
        position: absolute;
        top: 200px;
        left: 200px;
        width: 308px;
        height: 120px;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        color: #eee;
        z-index: 10;
      }
      header {
        margin-bottom: 0px;
      }
      /*  */
      section {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 40px;
        left: 0%;
        background: #333;
      }
      .blocks img {
        width: 100%;
        height: 100%;
        display: block;
      }
    </style>
  </head>
  <body>
    <section>
      <div class="banner">
        <div class="blocks"><img src="../img/images/baidu.jpg" alt="" /></div>
        <div class="sologn">多 块 好 省 只为品质生活</div>
      </div>
    </section>
    <header>
      <ul>
        <ol>
          <li><a href="./index.html">毛萌辉</a></li>
          <li><a href="./list2.html">手机逛淘宝</a></li>
        </ol>
        <ol>
          <li><a href="./index.html">首页</a></li>
          <li><a href="">我的淘宝</a></li>
          <li><a href="">收藏夹</a></li>
          <li><a href="./list2.html">商品分类</a></li>
        </ol>
      </ul>
    </header>
    <div class="box">
      <h2>注册页面</h2>
      <span>用户名:</span>
      <input type="text" name="name" placeholder="用户名" /><br />
      <span>密码:</span>
      <input type="text" name="pwd1" placeholder="密码" /><br />
      <span>确认密码:</span>
      <input type="text" name="pwd2" placeholder="确认密码" /><span
        name="pwdSpan"
        style="color: red"
      ></span
      ><br />
      <span>验证码:</span> <input type="text" name="vc" placeholder="验证码" />
      <a href="#" id="sc" style="cursor: pointer"> </a>
      <span class="vcSpan1" name="reset" style="cursor: pointer"
        >点击刷新验证码</span
      >
      <br />
      <span class="vcSpan" name="vcSpan" style="color: red"></span> <br />
      <button>注册</button><br />
      <p>已有账号?<a href="./login2.html?url=index.html">去登录</a></p>
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/inde.js"></script>
    <script>
      //1.随机验证码
      //验证码通过随机生成6位随机数实现
      //页面刷新立即先在验证码区域生成验证码
      $("#sc")
        .html(setVC())
        .click(function () {
          $(this).html(setVC());
        });
      //点击文字也可以刷新验证码
      $('[name="reset"]').click(function () {
        $("#sc").html(setVC());
      });
      //2.给注册按钮添加点击事件,获取到各个input的值,
      //通过ajax请求方式,注册跳转页面
      $("button").click(function () {
        //获取值
        let name = $('[name="name"]').val();
        let pwd1 = $('[name="pwd1"]').val();
        let pwd2 = $('[name="pwd2"]').val();
        let vc1 = $('[name="vc"]').val();
        //随机验证码
        let vc2 = $("#sc").html();

        //判断 如果两次输入的密码不相同 提示信息 并终止程序
        if (pwd1 !== pwd2) {
          $("[name='pwdSpan']").html("您输入密码不对");
          return;
        } else {
          //输入正确时，要清除掉提示信息
          $('[name="pwdSpan"]').html("");
        }
        //判断验证码 不区分大小写
        if (vc1.toLowerCase() !== vc2.toLowerCase()) {
          //输入的验证码不正确
          $('[name="vcSpan"]').html("输入验证码有误");
          //重新刷新验证码
          $("#sc").html(setVC());
          return;
        } else {
          //清除提示的错误
          $('[name="vcSpan"]').html("");
        }

        //触发了发送请求 也要刷新验证码
        $("#sc").html(setVC());

        //点击button按钮后 发送ajax请求
        const xhr = myPromiseJQueryAjax(
          "../server/goods_reg.php",
          "post",
          {
            userName: name,
            userPwd: pwd1,
          },
          "json"
        );
        xhr.then(function (res) {
          console.log(res);
          //res是返回来的一个对象
          //注册失败 弹出提示框
          if (res.result === 0) {
            window.alert("注册失败");
          } else if (res.result === 1) {
            window.alert("注册成功");
            window.location.href = `./login2.html?url=./index.html`;
          }
        });
      });
    </script>
  </body>
</html>
